*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.loader
{
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(175deg);
}
.loader span
{
    position: absolute;
    top:calc(12px * var(--i));
    left:calc(12px * var(--i));
    right:calc(12px * var(--i));
    bottom:calc(12px * var(--i));
    border:10px solid #0b0b0b;
    border-top: 10px solid #0f0;
    border-left: 10px solid #0f0;
    border-radius: 50%;
    animation: animate 1s alternate ease-in-out infinite;
    filter: hue-rotate(calc(60deg * var(--i)));
    animation-delay: calc(-0.1s * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(90deg);
    }
}